<template>
  <el-row class="bj_clss" v-loading="loading"
          element-loading-text="登录中..."
          :element-loading-spinner="svg"
          element-loading-svg-view-box="-10, -10, 50, 50"
          element-loading-background="rgba(122, 122, 122, 0.8)">
    <el-col :span="12" :xs="0"></el-col>
    <el-col :span="12" :xs="24">
      <div class="login_box">
        <el-row>
          <el-col :offset="10">
            <el-image :src="require('@/assets/website_logo.png')" style="width: 70px"></el-image>
          </el-col>
        </el-row>
        <el-form :model="loginForm" ref="fromRef" :rules="rules" label-width="70px" label-position="left" size="large">
          <!--          <el-form-item label="登录方式" prop="type">-->
          <!--            <el-radio-group v-model="loginForm.type">-->
          <!--              <el-radio :label="1">用户名</el-radio>-->
          <!--              <el-radio :label="2">邮箱</el-radio>-->
          <!--              <el-radio :label="3">短信</el-radio>-->
          <!--            </el-radio-group>-->
          <!--          </el-form-item>-->
          <el-form-item :label="loginMsg.label" prop="loginKey">
            <el-input v-model="loginForm.loginKey" :placeholder="loginMsg.typeMsg" :prefix-icon="User"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" :prefix-icon="Lock"/>
          </el-form-item>
          <el-form-item label="验证码" prop="captchaValue">
            <el-input v-model="loginForm.captchaValue" placeholder="请输入验证码" :prefix-icon="Key">
              <template #suffix>
                <el-divider direction="vertical"/>
                <el-image :src="captcha.image" class="captcha_img" @click="getcaptchaImage">
                  <template #error>
                    <span style="font-weight: 100;">加载中...</span>
                  </template>
                </el-image>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" style="width: 100%" class="button" @click="loginsubmit(fromRef)">登录</el-button>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import {reactive, ref, onMounted, watchEffect} from "vue";
import {getCaptcha, login} from "@/api";
import {useRouter} from "vue-router";
import {setToken, getToken} from "@/util/token/tokenUtil";
import {useMenusStore} from '@/store/permission'
import {Lock, User, Key} from "@element-plus/icons-vue";

const router = useRouter();
const store = useMenusStore()
let loading = ref(false)
/*验证码*/
let captcha = reactive({});
/*表单校验需要的属性*/
let fromRef = ref()
/*表单校验规则*/
let rules = reactive({
  loginKey: [
    {required: true, message: `不能为空`, trigger: 'blur'}
  ],
  password: [
    {required: true, message: `密码不能为空`, trigger: 'blur'}
  ],
  captchaValue: [
    {required: true, message: `验证码不能为空`, trigger: 'blur'}
  ]
})
onMounted(() => {
  //页面加载完毕执行
  //获取验证码
  getcaptchaImage();
  window.sessionStorage.clear()
  store.$reset()
});
let loginMsg = reactive({
  typeMsg: "请输入用户名",
  label: "用户名",
});
let loginForm = reactive({
  //登录数据封装
  type: 1,
  loginKey: "admin",
  password: "zaq123",
  captchaKey: "",
  captchaValue: "",
});

async function loginsubmit(r) {
  /*登录方法*/
  r.validate((valid) => {//elementplus的表单校验
    if (valid) {
      loading.value = true
      window.sessionStorage.clear()//清理所有缓存
      window.localStorage.clear()//清理所有缓存
      //发送登录请求，保存token，跳转主页
      login(loginForm).then((res) => {
        setToken("token", res.data.token);//保存token（sessionStorage）
        router.push("/home")//跳转主页
      }).finally(() => {
        loading.value = false
      })
    } else return false
  })
}

function getcaptchaImage() {
  // 获取验证码
  loginForm.captchaKey = ''
  loginForm.captchaValue = ''
  getCaptcha().then((res) => {
    Object.assign(captcha, res.data);
    loginForm.captchaKey = res.data.key;
  });
}

//监听----->登录方式不同提示不同的信息
watchEffect(() => {
  const loginType = loginForm.type;
  switch (loginType) {
    case 1:
      loginMsg.typeMsg = "请输入用户名";
      loginMsg.label = "用户名";
      break;
    case 2:
      loginMsg.typeMsg = "请输入邮箱";
      loginMsg.label = "邮箱号";
      break;
    case 3:
      loginMsg.typeMsg = "请输入手机号";
      loginMsg.label = "手机号";
      break;
  }
});
</script>

<style scoped>
.bj_clss {
  background: url("../assets/bj.png") no-repeat;
  background-size: cover;
  height: 100vh;
}

.login_box {
  width: 50%;
  background-color: white;
  opacity: 0.8;
  padding: 20px 40px;
  top: 25vh;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.captcha_img {
  width: 100px;
  height: 30px;
}

.button:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
</style>
